<template>
	<div class="passengersOrder">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item>乘客订单</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form :inline="true" :model="pOrderParams" ref="pOrderParams" label-width="150px">
			<el-row>
				<el-form-item label="订单编号" prop="param.serialNo">
					<el-input v-model="pOrderParams.param.serialNo" auto-complete="off " style='width: 217px;'></el-input>
				</el-form-item>
				<el-form-item label="用户账号" prop="param.userPhone">
					<el-input v-model="pOrderParams.param.userPhone" auto-complete="off " style='width: 217px;'></el-input>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="乘车人电话" prop="param.contactNo">
					<el-input v-model="pOrderParams.param.contactNo" auto-complete="off " style='width: 217px;'></el-input>
				</el-form-item>
				<el-form-item label="服务类型" prop="param.type">
					<el-select v-model="pOrderParams.param.type" placeholder="请选择服务类型" class="right-gap">
						<el-option label="请选择" value=""></el-option>
						<el-option v-for="item in serverType" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="订单状态" prop="param.status">
					<el-select v-model="pOrderParams.param.status" placeholder="请选择订单状态" class="right-gap">
						<el-option label="请选择" value=""></el-option>
						<el-option v-for="item in orderStatus" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="支付状态" prop="param.paymentStatus">
					<el-select v-model="pOrderParams.param.paymentStatus" placeholder="请选择支付状态" class="right-gap">
						<el-option label="请选择" value=""></el-option>
						<el-option v-for="item in paymentStatus" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="线路" prop="param.srcCityId">
					<el-select v-model="pOrderParams.param.srcCityId" placeholder="请选择出发城市" class="right-gap">
						<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<span class="to">至</span>
				<el-form-item prop="param.dstCityId">
					<el-select v-model="pOrderParams.param.dstCityId" placeholder="请选择出发城市" class="right-gap">
						<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="预约出发时间" prop="param.departureBeginLower">
					<el-date-picker v-model="pOrderParams.param.departureBeginLower" type="date" format="yyyy-MM-dd" placeholder="选择日期" style='width: 217px;'></el-date-picker>
				</el-form-item>
				<span class="to">至</span>
				<el-form-item prop="param.departureBeginUpper">
					<el-date-picker v-model="pOrderParams.param.departureBeginUpper" type="date" format="yyyy-MM-dd" placeholder="选择日期" style='width: 217px;'></el-date-picker>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="结束行程时间" prop="param.endTripLower">
					<el-date-picker v-model="pOrderParams.param.endTripLower" type="date" format="yyyy-MM-dd" placeholder="选择日期" style='width: 217px;'></el-date-picker>
				</el-form-item>
				<span class="to">至</span>
				<el-form-item prop="param.endTripUpper">
					<el-date-picker v-model="pOrderParams.param.endTripUpper" type="date" format="yyyy-MM-dd" placeholder="选择日期" style='width: 217px;'></el-date-picker>
				</el-form-item>
				<el-button type="primary" icon="search" @click="search('pOrderParams')">查询</el-button>
				<el-button type="primary" icon="plus" @click="exportData()">导出</el-button>
				<el-button type="danger" icon="setting" @click="resetForm('pOrderParams')">重置</el-button>
			</el-row>
		</el-form>
		<div class="shrink" style="color: #20a0ff;padding: 0 0 10px 10px;cursor:pointer"><span @click="shrink()">{{shrinkTitle}}</span></div>
		<el-table :data="pOrderTableData" class='pOrderTableData' :row-key="getRowKeys" :expand-row-keys="expands" style="width: 100%">
			<el-table-column class="ignore-column" type="expand">
				<template scope="props">
					<div class="pocontent">
						<el-form label-position="left" inline class="demo-table-expand poleft">
							<el-form-item label="行程距离">
								<span>{{ props.row.mileage }}</span>
							</el-form-item>
							<el-form-item label="乘车人数">
								<span>{{ props.row.passengerCount }}</span>
							</el-form-item>
							<el-form-item label="出行时间">
								<span>{{dateFormat(props.row.departureBegin,'yyyy-MM-dd hh:mm')}}-{{dateFormat(props.row.departure,'hh:mm')}}</span>
							</el-form-item>
							<el-form-item label="车型">
								<span>{{ props.row.carTypeId}}</span>
							</el-form-item>
							<el-form-item label="用户名称">
								<span>{{ props.row.userName }}</span>
							</el-form-item>
							<el-form-item label="用户账号">
								<span>{{ props.row.userPhone }}</span>
							</el-form-item>
							<el-form-item label="乘车联系人">
								<span>{{ props.row.contact }}</span>
							</el-form-item>
							<el-form-item label="支付金额">
								<span>{{ props.row.totalPrice }}</span>
							</el-form-item>
							<el-form-item label="订单金额">
								<span>{{ props.row.priceWithoutCoupon }}</span>
							</el-form-item>
							<el-form-item label="优惠券金额">
								<span>{{ props.row.discount }}</span>
							</el-form-item>
							<el-form-item label="支付方式">
								<span>{{ props.row.paymentType }}</span>
							</el-form-item>
							<el-form-item label="退款金额">
								<span>{{ props.row.refundAmount }}</span>
							</el-form-item>
							<el-form-item label="出发地">
								<span>{{ props.row.address }}</span>
							</el-form-item>
							<el-form-item label="目的地">
								<span>{{ props.row.dstAddress }}</span>
							</el-form-item>
						</el-form>
					</div>
				</template>
			</el-table-column>
			<el-table-column align='center' label="订单编号" prop="serialNo" min-width="140"></el-table-column>
			<el-table-column align='center' label="服务类型" prop="type" min-width="66"></el-table-column>
			<el-table-column align='center' label="出发城市" prop="srcCity" min-width="100"></el-table-column>
			<el-table-column align='center' label="目的城市" prop="dstCity" min-width="100"></el-table-column>
			<el-table-column align='center' label="订单状态" prop="status" min-width="66"></el-table-column>
			<el-table-column align='center' label="支付状态" prop="paymentStatus" min-width="66"></el-table-column>
			<el-table-column align='center' label="行程编号" prop="orderSerialNo" min-width="125"></el-table-column>
			<el-table-column align='center' label="异常订单备注" prop="remarks" min-width="155" class='white-space'></el-table-column>
			<el-table-column align='center' label="操作" prop="" min-width="86">
				<template scope="scope">
					<el-dropdown>
						<span class="el-dropdown-link"><el-button type="primary" size='small'>下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i></el-button></span>
						<el-dropdown-menu slot="dropdown" class='dropdown-btn'>
							<el-dropdown-item>
								<el-button size='small' icon='edit' type="info" @click="remark(scope.row)">备注记录</el-button>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-button size='small' icon='information' type="warning" @click="passergenrsInfo(scope.row)">乘车人信息</el-button>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-button size='small' icon='information' type="warning" @click="carInfo(scope.row)">车辆与司机</el-button>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-button size='small' icon='information' type="warning" @click="auditLog(scope.row)">操作日志</el-button>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-button size='small' icon='edit' type="info" @click="updateOrder(scope.row)">修改订单</el-button>
							</el-dropdown-item>
							<!--<el-dropdown-item>-->
							<!--<el-button size='small' icon='edit' type="primary" @click="addAndReviseLineClick(scope.row)">全额退款</el-button>-->
							<!--</el-dropdown-item>-->
							<el-dropdown-item>
								<el-button size='small' icon='edit' type="danger" @click="manualClose(scope.row)">人工关闭</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
			<!--<el-table-column v-show="false" align='center' label="行程距离" prop="mileage"></el-table-column>
			<el-table-column align='center' label="乘车人数" prop="passengerCount"></el-table-column>
			<el-table-column align='center' label="出行时间" prop="type">
			  <template scope="scope">
			    <span>{{dateFormat(scope.row.departureBegin,'yyyy-MM-dd hh:mm')}}-{{dateFormat(scope.row.departure,'hh:mm')}}</span>
			  </template>
			</el-table-column>
			<el-table-column align='center' label="车型" prop="carTypeId"></el-table-column>
			<el-table-column align='center' label="用户名称" prop="userName"></el-table-column>
			<el-table-column align='center' label="用户账号" prop="userPhone"></el-table-column>
			<el-table-column align='center' label="乘车联系人" prop="contact"></el-table-column>
			<el-table-column align='center' label="支付金额" prop="totalPrice"></el-table-column>
			<el-table-column align='center' label="订单金额" prop="priceWithoutCoupon"></el-table-column>
			<el-table-column align='center' label="优惠券金额" prop="discount"></el-table-column>
			<el-table-column align='center' label="支付方式" prop="paymentType"></el-table-column>
			<el-table-column align='center' label="退款金额" prop="refundAmount"></el-table-column>
			<el-table-column align='center' label="出发地" prop="address"></el-table-column>
			<el-table-column align='center' label="目的地" prop="dstAddress"></el-table-column>-->
		</el-table>
		<el-pagination class='pagination' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pOrderParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pOrderParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
		<el-dialog v-model="ispInfo" class='ispInfo' title="乘车人信息" size='small'>
			<el-table :data="pInfoData" border style="width: 100%">
				<el-table-column align='center' prop="name" label="乘车人姓名"></el-table-column>
				<el-table-column align='center' prop="icNo" label="身份证号码"></el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer ">
				<el-button type="primary" @click="ispInfo = false">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog v-model="isCarInfo" class='isCarInfo' title="司机与车辆信息" size='small'>
			<el-form :inline="true" :model="carInfoData" label-width="150px">
				<el-row>
					<el-form-item label="车辆行程编号:">{{carInfoData.seriralNo}}</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="车牌号:">{{carInfoData.plateNo}}</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="工作手机:">{{carInfoData.carPhone}}</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="司机姓名:">{{carInfoData.driverName}}</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="司机账号:">{{carInfoData.driverPhone}}</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="代理公司:">{{carInfoData.companyName}}</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="本次服务评分:">{{carInfoData.rating}}</el-form-item>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer ">
				<el-button type="primary" @click="isCarInfo = false">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog v-model="isUpdateOrder" class='isUpdateOrder' title="修改订单" size='small'>
			<el-form :inline="true" :model="updateOrderData" ref="updateOrderData" label-width="120px">
				<el-row>
					<el-form-item label="订单编号">{{updateOrderData.serialNo}}</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="乘车联系人" prop="contact" :rules="[{required: true,message: '请输入乘车联系人'}]">
						<el-input v-model="updateOrderData.contact" auto-complete="off " style='width: 217px;'></el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="出行时间" prop="departureBegin" :rules="[{required: true,message: '请选择出行开始时间'}]">
						<el-date-picker v-model="updateOrderData.departureBegin" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期"></el-date-picker>
					</el-form-item>
					<span class="to">至</span>
					<el-form-item prop="departureEnd" :rules="[{required: true,message: '请选择出行结束时间'}]">
						<el-date-picker v-model="updateOrderData.departureEnd" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期"></el-date-picker>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="订单状态" prop="status" :rules="[{required: true,message: '请选择订单状态'}]">
						<el-select v-model="updateOrderData.status" placeholder="请选择订单状态" class="right-gap">
							<el-option v-for="item in orderStatus" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer ">
				<el-button type="primary" @click="isUpdateOrder = false">取 消</el-button>
				<el-button type="primary" @click="confirmUpdateOrder('updateOrderData')">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog v-model="isAuditLog" class='isAuditLog' title="操作日志" size='small'>
			<el-table :data="auditLogData" border style="width: 100%">
				<el-table-column align='center' prop="opTypeStr" label="类型"></el-table-column>
				<el-table-column align='center' prop="strField1" label="操作内容"></el-table-column>
				<el-table-column align='center' prop="" label="操作时间">
					<template scope="props">
						<span>{{dateFormat(props.row.time,'yyyy-MM-dd hh:mm')}}</span>
					</template>
				</el-table-column>

				<el-table-column align='center' prop="managementUserName" label="账号名称"></el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer ">
				<el-button type="primary" @click="isAuditLog = false">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog v-model="isRemark" class='isRemark' :title="remarkTitle" size='tiny'>
			<ul>
				<li v-for="item in remarksData">{{item}}</li>
			</ul>
			<el-input type="textarea" :rows="5" class='addRemarksInfo' v-model="addRemarksInfo" placeholder="请输入新增备注"></el-input>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="isRemark = false">取 消</el-button>
				<el-button type="primary" @click="addRemarks">添加备注</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "passengersOrder",
		data() {
			return {
				cityList: [],
				orderStatus: [{
					id: 'UNPAY',
					name: '未支付'
				}, {
					id: 'PREPAYED',
					name: '预支付'
				}, {
					id: 'UN_TAKEN',
					name: '未派单'
				}, {
					id: 'TAKEN',
					name: '已派单'
				}, {
					id: 'CANCEL',
					name: '取消'
				}, {
					id: 'STARTED',
					name: '开始'
				}, {
					id: 'FINISHED',
					name: '完成'
				}, {
					id: 'RATED',
					name: '已评分'
				}, {
					id: 'OBSOLETED',
					name: '废弃'
				}, {
					id: 'NEED_REFUND',
					name: '需退款'
				}, {
					id: 'REFUNDING',
					name: '退款中'
				}, {
					id: 'REFUNDED',
					name: '已退款'
				}, {
					id: 'MANUALCLOSED',
					name: '手工关闭'
				}, {
					id: 'DRIVER_WAITING_START',
					name: ' 已支付并司机等候中'
				}, {
					id: 'WAITED_UNPAY',
					name: '未支付并已等候'
				}, {
					id: 'WAITED_PREPAY',
					name: '预支付并已等候'
				}, {
					id: 'CONFIRM_ONBOARD',
					name: '确认上车'
				}],
				serverType: [{
					id: 'COMMON_SHARE_CAR',
					name: '普通拼车'
				}, {
					id: 'COMMON_CHARTERED_CAR',
					name: '普通包车'
				}, {
					id: 'QRCODE_SHARE_CAR',
					name: '扫码拼车'
				}, {
					id: 'PHONE_SHARE_CAR',
					name: '电话拼车'
				}, {
					id: 'PHONE_CHARTERED_CAR',
					name: '电话包车'
				}, {
					id: 'CTRIP_SHARE_CAR',
					name: '携程订单'
				}],
				paymentStatus: [{
					id: 'PAYING',
					name: '未支付'
				}, {
					id: 'SUCCESS',
					name: '已支付'
				}, {
					id: 'REFUNDED',
					name: '已退款'
				}],
				operaStatus: [{
						id: 'SER_REGISTER',
						name: '注册'
					}, // 0
					{
						id: 'USER_LOGIN',
						name: '登录'
					}, // 1
					{
						id: 'USER_UPDATE_PHONE',
						name: '更新手机号',
					}, // 2 
					{
						id: 'PLACE_RESERVATION',
						name: '预约用车'
					}, // 3
					{
						id: 'QRCODE_RESERVATION',
						name: '验证码'
					}, // 4
					{
						id: 'USE_COUPON',
						name: '使用优惠券'
					}, // 5
					{
						id: 'CANCEL_RESERVATION',
						name: '取消用车'
					}, // 6
					{
						id: 'RATING_RESERVATION',
						name: '评级'
					}, // 7
					{
						id: 'ADD_CAR',
						name: '添加车辆'
					}, //8
					{
						id: 'UPDATE_CAR',
						name: '更新车辆'
					}, // 9
					{
						id: 'DELETE_CAR',
						name: '删除车辆'
					}, // 10
					{
						id: 'CAR_ONLINE',
						name: '在线车辆'
					}, // 11
					{
						id: 'CAR_OFFLINE',
						name: '关闭车辆'
					}, // 12
					{
						id: 'QRCODE_ORDER',
						name: '验证订单'
					}, // 13
					{
						id: 'SEARCH_RESERVATION',
						name: '搜索地点'
					}, // 14 
					{
						id: 'ADD_RESERVATION_TO_ORDER',
						name: '添加订单'
					}, // 15
					{
						id: 'CANCEL_ORDER',
						name: '取消订单'
					}, // 16
					{
						id: 'REMOVE_RESERVATION_FROM_ORDER',
						name: '删除订单'
					}, // 17 
					{
						id: 'START_ORDER',
						name: '开始订单'
					}, // 18
					{
						id: 'FINISH_ORDER',
						name: '完成订单'
					}, // 19
					{
						id: 'PAYMENT_LOG',
						name: '支付完成'
					}, // 20
					{
						id: 'SEND_SMS',
						name: '发送信息'
					}, // 21
					{
						id: 'START_REFUND',
						name: '发起退款'
					}, // 22
					{
						id: 'CANCEL_REFUND',
						name: '取消退款'
					}, // 23
					{
						id: 'CAR_AUDIT',
						name: '车辆审核'
					}, // 24  车辆审核
					{
						id: 'CH_FINISHED',
						name: ''
					}, //25
					{
						id: 'CH_NEED_REFUND',
						name: ''
					}, //
					{
						id: 'CH_DEPARTURE',
						name: ''
					}, {
						id: 'CANCEL_TELERESERV_DISPATCHER',
						name: "取消电话订单"
					}, // 28 
					{
						id: 'TELERESERV_INPUT',
						name: "电话订单录入"
					}, // 29 
					{
						id: 'RESERV_MARK_ISTAKEN',
						name: "确认订单"
					}, // 30 
					{
						id: 'WAITING_PASSENGER',
						name: "开始等待"
					}, // 31 
					{
						id: 'START_RESERVATION',
						name: "订单开始"
					}, // 32 
					{
						id: 'DRIVER_ONLINE',
						name: "司机登陆"
					}, // 33 
					{
						id: 'CAR_LOGIN',
						name: "车辆登陆"
					}, // 34 
					{
						id: 'DRIVER_OFFLINE',
						name: "司机下线"
					}, // 35 
					{
						id: 'GEN_RENTAL_BILL',
						name: "生成租车账单"
					}, // 36 
					{
						id: 'ADD_RENTAL_CAR',
						name: "新增车辆"
					}, //37 
					{
						id: 'DEL_DRIVER',
						name: "删除司机"
					}, //38 
					{
						id: 'GOV_RESERV_INPUT',
						name: "录入政企订单"
					}, //39 
					{
						id: 'MAN_UPDATE_RESERV',
						name: "后台操作修改订单"
					}, //40 
					{
						id: 'MAN_UPDATE_ORDER',
						name: "后台操作修改司机行程"
					} //41 
				],
				pOrderParams: {
					pageSize: 10,
					pageNum: 1,
					param: {
						serialNo: '',
						userPhone: '',
						srcCityId: '',
						dstCityId: '',
						contactNo: '',
						type: '',
						status: '',
						paymentStatus: '',
						departureBeginLower: '',
						departureBeginUpper: '',
						endTripLower: '',
						endTripUpper: ''
					}
				},
				total: 0,
				shrinkTitle: '全部收起',
				pOrderTableData: [],
				// 获取row的key值
				getRowKeys(row) {

					return row.serialNo;
				},
				// 要展开的行，数值的元素是row的key值
				expands: [],
				ispInfo: false,
				isCarInfo: false,
				isUpdateOrder: false,
				isAuditLog: false,
				isRemark: false,
				remarkTitle: '',
				pInfoData: [],
				carInfoData: {},
				updateOrderData: {
					status: '',
					contact: '',
					departureBegin: '',
					departureEnd: ''
				},
				auditLogData: [],
				remarksData: [],
				addRemarksInfo: '',
				reservId: '',
			}
		},
		methods: {
			shrink() {
				var shrinkTitle = this.shrinkTitle;
				if(this.shrinkTitle == '全部收起') {
					this.expands = [];
					this.shrinkTitle = '全部展开';
				} else if(this.shrinkTitle == '全部展开') {
					for(var i = 0; i < this.pOrderTableData.length; i++) {
						this.expands.push(this.pOrderTableData[i].serialNo);
					}
					this.shrinkTitle = '全部收起';
				}
			},
			search(formName) {
				var that = this;
				var data = this.pOrderParams;
				data.param.departureBeginLower = new Date(this.pOrderParams.param.departureBeginLower).getTime() || '';
				data.param.departureBeginUpper = new Date(this.pOrderParams.param.departureBeginUpper).getTime() || '';
				data.param.endTripLower = new Date(this.pOrderParams.param.endTripLower).getTime() || '';
				data.param.endTripUpper = new Date(this.pOrderParams.param.endTripUpper).getTime() || '';
				for(var key in this.pOrderParams.param) {
					if(this.pOrderParams.param[key] == '') {
						delete this.pOrderParams.param[key];
					}
				}
				this.$http.post("/passengersOrderList.shtml",
					"param=" + JSON.stringify(data)
				).then(function(data) {
					if(data.code == 200) {
						that.pOrderTableData = data.data;
						that.total = Number(data.appendix);
						for(var i = 0; i < data.data.length; i++) {
							if(data.data[i].remarks && data.data[i].remarks.length != 0) {
								that.pOrderTableData[i].remarks = data.data[i].remarks[data.data[i].remarks.length - 1]
							}
							var type = data.data[i].type;
							var status = data.data[i].status;
							var paymentStatus = data.data[i].paymentStatus;
							for(var n = 0; n < that.serverType.length; n++) {
								if(type == that.serverType[n].id) {
									that.pOrderTableData[i].type = that.serverType[n].name;
								}
							}
							for(var n = 0; n < that.orderStatus.length; n++) {
								if(status == that.orderStatus[n].id) {
									that.pOrderTableData[i].status = that.orderStatus[n].name;
								}
							}
							for(var n = 0; n < that.paymentStatus.length; n++) {
								if(paymentStatus == that.paymentStatus[n].id) {
									that.pOrderTableData[i].paymentStatus = that.paymentStatus[n].name;
								}
							}
						};
						// 在这里你想初始化的时候展开哪一行都可以了
						for(var i = 0; i < that.pOrderTableData.length; i++) {
							that.expands.push(that.pOrderTableData[i].serialNo);
						}
						//重新定义
						that.pOrderParams = {
							pageSize: that.pOrderParams.pageSize,
							pageNum: that.pOrderParams.pageNum,
							param: {
								serialNo: that.pOrderParams.param.serialNo,
								userPhone: that.pOrderParams.param.userPhone,
								srcCityId: that.pOrderParams.param.srcCityId,
								dstCityId: that.pOrderParams.param.dstCityId,
								contactNo: that.pOrderParams.param.contactNo,
								type: that.pOrderParams.param.type,
								status: that.pOrderParams.param.status,
								paymentStatus: that.pOrderParams.param.paymentStatus,
								departureBeginLower: that.pOrderParams.param.departureBeginLower,
								departureBeginUpper: that.pOrderParams.param.departureBeginUpper,
								endTripLower: that.pOrderParams.param.endTripLower,
								endTripUpper: that.pOrderParams.param.endTripUpper
							}
						}
					}
				});
			},
			passergenrsInfo(row) {
				var that = this;
				this.ispInfo = true;
				this.pInfoData = [];
				this.$http.get('/passengersList.shtml', {
						params: {
							reservId: row.reservationId
						}
					})
					.then(function(data) {
						if(data.code == 200) {
							that.pInfoData = data.data;
						}
					});
			},
			carInfo(row) {
				var that = this;
				this.isCarInfo = true;
				this.carInfoData = {};
				this.$http.get('/carInfoList.shtml', {
						params: {
							reservId: row.reservationId
						}
					})
					.then(function(data) {
						if(data.code == 200) {
							that.carInfoData = data.data;
						}
					});
			},
			updateOrder(row) {
				this.isUpdateOrder = true;
				this.updateOrderData = {
					status: '',
					contact: '',
					departureBegin: '',
					departureEnd: ''
				};
				var status = row.status;
				for(var n = 0; n < this.orderStatus.length; n++) {
					if(status == this.orderStatus[n].name) {
						this.updateOrderData.status = this.orderStatus[n].id;
					}
				}
				this.updateOrderData.reservId = row.reservationId;
				this.updateOrderData.serialNo = row.serialNo;
				this.updateOrderData.contact = row.contact;
				this.updateOrderData.departureBegin = row.departureBegin;
				this.updateOrderData.departureEnd = row.departure;
				console.log(this.api.vueDataFormat(this.updateOrderData));
			},
			confirmUpdateOrder(formName) {
				var that = this;
				this.updateOrderData.departureBegin = new Date(this.updateOrderData.departureBegin).getTime() || '';
				this.updateOrderData.departureEnd = new Date(this.updateOrderData.departureEnd).getTime() || '';
				if(this.updateOrderData.contact == '') {
					this.validateNotify('请输入乘车联系人！');
				} else if(this.updateOrderData.departureBegin == '') {
					this.validateNotify('请选择出行开始时间！');
				} else if(this.updateOrderData.departureEnd == '') {
					this.validateNotify('请选择出行结束时间！');
				} else if(this.updateOrderData.departureEnd < this.updateOrderData.departureBegin) {
					this.validateNotify('结束时间必须大于开始时间！');
				} else if(this.updateOrderData.status == '') {
					this.validateNotify('请选择订单状态！');
				} else {
					this.$http.post("/updateOrder.shtml",
						"param=" + JSON.stringify(this.updateOrderData)
					).then(function(data) {
						if(data.code == 200) {
							that.isUpdateOrder = false;
							that.search();
							that.$notify({
								title: '成功',
								message: '修改成功',
								type: 'success'
							});
						}
					});
				}
			},
			manualClose(row) {
				var that = this;
				var paymentId = {
					paymentId: row.paymentId
				};
				this.$confirm('订单' + row.serialNo + '状态置为人工关闭后将不再退款，是否确认修改？', '人工关闭', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post("/manualClose.shtml",
						"param=" + JSON.stringify(paymentId)
					).then(function(data) {
						if(data.code == 200) {
							that.$notify({
								title: '成功',
								message: '成功关闭',
								type: 'success'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消修改！'
					});
				});
			},
			auditLog(row) {
				var that = this;
				this.isAuditLog = true;
				this.auditLogData = [];
				this.$http.get('/auditLog.shtml', {
						params: {
							reservId: row.reservationId
						}
					})
					.then(function(data) {
						if(data.code == 200) {
							that.auditLogData = data.data;
							for(var i = 0; i < data.data.length; i++) {
								var opTypeStr = data.data[i].opTypeStr;
								for(var n = 0; n < that.operaStatus.length; n++) {
									if(opTypeStr == that.operaStatus[n].id) {
										data.data[i].opTypeStr = that.operaStatus[n].name;
									}
								}
							}
						}
					});
			},
			remark(row) {
				this.reservId = row.reservationId;
				var that = this;
				this.isRemark = true;
				this.remarksData = [];
				this.remarkTitle = row.serialNo + '异常订单备注记录';
				this.$http.get('/getOrderRemarks.shtml', {
						params: {
							reservId: this.reservId
						}
					})
					.then(function(data) {
						if(data.code == 200) {
							that.remarksData = data.data;
						}
					});
			},
			addRemarks(row) {
				var that = this;
				var data = {};
				data.reservId = this.reservId;
				data.remark = this.addRemarksInfo;
				if(this.addRemarksInfo == '') {
					this.validateNotify('请填写备注内容！');
				} else {
					this.$http.post("/addOrderRemark.shtml",
						"param=" + JSON.stringify(data)
					).then(function(data) {
						if(data.code == 200) {
							that.isRemark = false;
							that.search();
							that.$notify({
								title: '成功',
								message: '添加成功',
								type: 'success'
							});
						}
					})
				}
			},
			exportData() {
			  var that = this;
				$(".pOrderTableData").tableExport({
					type: 'user',
					separator: ';',
					escape: 'false',
					tableName: "乘客订单",
					consoleLog: "true",
					ignoreColumn: [0,9],
					th: [{key: "", val:"订单编号"}, {key: "", val:"服务类型"}, {key: "", val:"出发城市"}, {key: "", val:"目的城市"}, {key: "", val:"订单状态"}, {key: "", val:"支付状态"}, {key: "", val:"行程编号"}, {key: "", val:"异常订单备注"}, {key: "", val:"行程距离"}, {key: "", val:"乘车人数"}, {key: "", val:"出行时间"}, {key: "", val:"车型"}, {key: "", val:"用户名称"}, {key: "", val:"用户账号"}, {key: "", val:"乘车联系人"}, {key: "", val:"支付金额"}, {key: "", val:"订单金额"}, {key: "", val:"优惠券金额"}, {key: "", val:"支付方式"}, {key: "", val:"退款金额"}, {key: "", val:"出发地"}, {key: "", val:"目的地"}],
					data: that.pOrderTableData
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.pOrderParams.pageSize = val;
				this.search();
			},
			handleCurrentChange(val) {
				this.pOrderParams.pageNum = val;
				this.search();
			},
			dateFormat: function(time, fmt) {
				if(!time) {
					return "";
				}
				var d = new Date(time);
				var o = {
					"M+": d.getMonth() + 1, //月份   
					"d+": d.getDate(), //日   
					"h+": d.getHours(), //小时   
					"m+": d.getMinutes(), //分   
					"s+": d.getSeconds(), //秒   
					"q+": Math.floor((d.getMonth() + 3) / 3), //季度   
					"S": d.getMilliseconds() //毫秒   
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			},
			validateNotify(mes) {
				this.$notify({
					type: 'error',
					title: '提示',
					message: mes
				});
			}
		},
		created() {
			var that = this;
			this.search();
			this.$http.post('/cityList.shtml', "value=" + JSON.stringify({
					name: "all"
				}))
				.then(function(data) {
					that.cityList = data.data;
				});

		}
	}
</script>
<style>
  .none {
    display: none !important;
  }
	.to {
		display: inline-block;
		vertical-align: top;
		margin-top: 9px;
		margin-right: 10px;
	}
	
	.pocontent {
		display: box;
		display: -moz-box;
		display: -webkit-box;
	}
	
	.poright button {
		margin-bottom: 15px;
		width: 80px;
	}
	
	.passengersOrder .el-button+.el-button {
		margin-left: 0px;
	}
	
	.passengersOrder .el-table__expanded-cell {
		padding: 10px 10px 10px 20px;
	}
	
	.passengersOrder .el-table .cell,
	.passengersOrder .el-table th>div {
		padding: 0 !important;
	}
	
	.passengersOrder .pOrderTableData .el-form-item__label {
		padding: 5px 12px 5px 0 !important;
	}
	
	.pocontent .el-form-item__content {
		line-height: 24px !important;
		width: calc(100% - 90px);
	}
	
	.demo-table-expand {
		font-size: 0;
	}
	
	.demo-table-expand label {
		width: 85px;
		color: #99a9bf;
	}
	
	.demo-table-expand .el-form-item {
		margin-right: 0 !important;
		width: 33.3333% !important;
		box-sizing: border-box;
		padding-right: 10px;
	}
	
	.passengersOrder .el-table .cell {
		white-space: normal !important;
	}
	
	.isRemark ul {
		margin: -15px 0 0 -10px;
	}
	
	.isRemark li {
		list-style: none;
		font-size: 16px;
		padding: 5px 0;
	}
	
	.isRemark .addRemarksInfo {
		margin-top: 20px;
	}
	
	.dropdown-btn button {
		width: 95px;
	}
</style>